<template>
  <div>
    <HeadTag :tagName="tagName" :curTag="curTag"></HeadTag>
    <el-divider></el-divider>
    <Search :searchTable="searchTable" :showSearch="showSearch" :selectOptions="selectOptions"></Search>
    <el-button type="primary" @click="getDormitory">重置</el-button>
    <el-button type="primary" @click="showAddDormitory">添加宿舍</el-button>
    <Table :tHead="tHead" :tBody="tBody" :tButton="tButton"></Table>
    <!-- 修改框 -->
    <el-dialog title="修改宿舍信息" align="center" :visible.sync="changeDialogVisible" width="30%">
      <el-form :model="changeForm" :rules="changeRules" ref="changeRef" label-width="100px" class="demo-ruleForm">
        <el-form-item label="宿舍编号:" prop="d_number">
          <el-input v-model="changeForm.d_number" disabled></el-input>
        </el-form-item>
        <el-form-item label="宿舍名称:" prop="d_name">
          <el-input v-model="changeForm.d_name"></el-input>
        </el-form-item>
        <el-form-item label="宿舍人数:" prop="personNum">
          <el-input v-model="changeForm.personNum" disabled></el-input>
        </el-form-item>
        <el-form-item label="宿舍水电费余额:" prop="d_money">
          <el-input v-model="changeForm.d_money"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="changeDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="changeDormitory">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 增加框 -->
    <el-dialog title="新增学生" align="center" :visible.sync="addDialogVisible" width="30%">
      <el-form :model="addForm" :rules="addRules" ref="addRef" label-width="100px" class="demo-ruleForm">
        <el-form-item label="宿舍编号:" prop="d_number">
          <el-input v-model="addForm.d_number"></el-input>
        </el-form-item>
        <el-form-item label="宿舍名:" prop="d_name">
          <el-input v-model="addForm.d_name"></el-input>
        </el-form-item>
        <el-form-item label="宿舍水电费余额:" prop="d_money">
          <el-input v-model="addForm.d_money"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addDormitory">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tagName: [],
      curTag: '宿舍管理',
      //Table属性
      tHead: [
        {
          prop: 'd_number',
          label: '宿舍编号'
        },
        {
          prop: 'd_name',
          label: '宿舍名称'
        },
        {
          prop: 'personNum',
          label: '宿舍人数'
        },
        {
          prop: 'd_money',
          label: '宿舍水电费余额(元)'
        },
        {
          prop: 'd_status',
          label: '宿舍状态'
        }
      ],
      tBody: [],
      tButton: [
        {
          content: '修改',
          type: 'success',
          method: this.changeRow
        },
        {
          content: '删除',
          type: 'danger',
          method: this.deleteRow
        },
      ],
      //搜索
      showSearch: {
        input: true,
      },
      selectOptions: [],
      //修改框
      changeDialogVisible: false,
      changeForm: {},
      changeRules: {
        d_name: [
          { required: true, message: '请输入宿舍名称', trigger: 'blur' },
        ],
        d_money: [
          { required: true, message: '请输入宿舍水电费', trigger: 'blur' },
        ],
      },
      changeInfo: {
        d_name: '',
        d_money: '',
        d_id: ''
      },
      // 新增宿舍
      addDialogVisible: false,
      addForm: {
        d_name: '',
        d_number: '',
        d_money: '',
      },
      addRules: {
        d_name: [
          { required: true, message: '请输入宿舍名', trigger: 'blur' },
        ],
        d_number: [
          { required: true, message: '请输入宿舍编号', trigger: 'blur' },
        ],
        d_money: [
          { required: true, message: '请输入宿舍水电费', trigger: 'blur' },
        ],
      },
    };
  },
  methods: {
    //table操作
    changeRow (row) {
      this.changeForm = JSON.parse(JSON.stringify(row))
      this.changeDialogVisible = true
    },
    deleteRow (row) {
      this.deleteDormitory(row.d_id)
    },

    //获取宿舍数据
    async getDormitory () {
      const result = await this.$http.get('/getDormitory')
      if (result.status !== 200) return this.$message.error(result.message)
      result.data.forEach((val) => {
        if (val.d_status === 1) {
          val.d_status = '正常'
        } else {
          val.d_status = '催款中'
        }
      })
      this.tBody = result.data
    },

    // 添加宿舍
    showAddDormitory () {
      this.addDialogVisible = true
    },
    addDormitory () {
      this.$refs.addRef.validate(async (valid) => {
        if (valid) {
          const result = await this.$http.post('/addDormitory', this.addForm)
          if (result.status !== 200) return this.$message.error(result.message)
          this.getDormitory()
          this.$message.success('新增成功!')
          this.addDialogVisible = false
          this.addForm = {
            d_number: '',
            d_name: '',
            d_money: '',
          }
        }
      });
    },

    deleteDormitory (id) {
      this.$confirm('此操作将永久删除该宿舍, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const result = await this.$http.post('/deleteDormitory', { d_id: id })
        if (result.status === 301) return this.$message.error(result.message)
        if (result.status !== 200) return this.$message.error('删除失败!')
        this.getDormitory()
        this.$message.success('删除成功!')
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    // 修改宿舍信息
    changeDormitory () {
      this.$refs.changeRef.validate(async (valid) => {
        if (valid) {
          this.changeInfo.d_name = this.changeForm.d_name
          this.changeInfo.d_money = this.changeForm.d_money
          this.changeInfo.d_id = this.changeForm.d_id
          const result = await this.$http.post('/changeDormitory', this.changeInfo)
          if (result.status !== 200) return this.$message.error('修改失败!')
          this.getDormitory()
          this.$message.success('修改成功!')
          this.changeDialogVisible = false
        }
      });
    },

    // 搜索
    async searchTable (val) {
      const result = await this.$http.post('/searchDormitory', { d_name: val })
      if (result.status !== 200) return this.$message.error('查询失败!')
      if (!result.data.length) return this.$message.warning('没有该宿舍!')
      this.tBody = result.data
      this.$message.success('查询成功')
    }
  },
  created () {
    this.$store.commit('addTag', { name: '宿舍管理', router: 'dormitory' })
    this.tagName = this.$store.state.tagNames
    this.getDormitory()
  },
};
</script>

<style scoped>

</style>
